<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>客户分析</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="${basepath}/assets/highcharts/js/highcharts.js"></script>
    <script src="${basepath}/assets/highcharts/js/highcharts-3d.js"></script>
    <script src="${basepath}/assets/highcharts/js/modules/drilldown.js"></script>
    <script src="${basepath}/assets/highcharts/js/modules/exporting.js"></script>
    <style>
        body{
            font-size: 16px;
        }
        a{text-decoration:none}
    </style>
    <script>
        var oChart = null;
        var columnOptions = {
            chart: {
                renderTo: 'container',
                type: 'column'
                //options3d: {
                //    enabled: true,
                //    alpha: 5,//上下倾斜角度
                //    beta: 5,//左右倾斜角度
                //    depth: 120,//深度
                //    frame: {//3D墙背景
                //        bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                //        back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                //       side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                //    }
                // }
            },
            title: {
                text: '客户分析'
            },
            subtitle: {
                text: '客户分析.'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            legend: {
                enabled: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b>'
            }
            //, series:[{"name":"企业客户","data":[0,0,0,0,0,0,0,1,0,0,0,0]},{"name":"个人客户","data":[0,0,2,0,0,0,0,4,0,0,0,0]}]
        }

        var linesOptions = {
            chart: {
                renderTo: 'container'
            },
            title: {
                text: '客户分析',
                x: -20
            },
            subtitle: {
                text: '客户分析',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: '人数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '人'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            }
        }

        var pieOptions = {
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '客户分析'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series:[{type: 'pie'}]
        }

        function LoadColumnSerie(dateYear,deptId,userId) {
            if(!dateYear){
                return $.messager.alert('提示','请先选择年度!');
            }
            oChart = new Highcharts.Chart(columnOptions);
            $.ajax({
                url : '${path}/report/khfxSeries?dateYear='+dateYear+'&deptId='+deptId+'&userId='+userId,
                type : 'POST',
                dataType : 'json',
                success : function(rntData){
                    $.each(rntData,function (key, value){
                        oChart.addSeries(value);
                    })
                }
            });
        }

        function LoadLinesSerie(dateYear,deptId,userId) {
            if(!dateYear){
                return $.messager.alert('提示','请先选择年度!');
            }
            oChart = new Highcharts.Chart(linesOptions);
            $.ajax({
                url : '${path}/report/khfxSeries?dateYear='+dateYear+'&deptId='+deptId+'&userId='+userId,
                type : 'POST',
                dataType : 'json',
                success : function(rntData){
                    $.each(rntData,function (key, value){
                        oChart.addSeries(value);
                    })
                }
            });
        }

        function LoadPieSerie(dateYear,deptId,userId) {
            if(!dateYear){
                return $.messager.alert('提示','请先选择年度!');
            }
            oChart = new Highcharts.Chart(pieOptions);
            $.ajax({
                url : '${path}/report/khfxPieSeries?dateYear='+dateYear+'&deptId='+deptId+'&userId='+userId,
                type : 'POST',
                dataType : 'json',
                success : function(rntData){
                    var oSeries = {
                        type: 'pie',
                        data: []
                    };
                    $.each(rntData,function (key, value){
                        var pieDate = new Array();
                        pieDate.push(value.custype);
                        pieDate.push(value.cusnum);
                        oSeries.data.push(pieDate);
                    })
                    oChart.addSeries(oSeries);
                }
            });
        }

        function ptkhDetail(val,row,index){return '<a href="#" onclick="showDetail(\'1\',\''+row.serviceTime+'\')">'+val+'</a>';}
        function qzkhDetail(val,row,index){return '<a href="#" onclick="showDetail(\'2\',\''+row.serviceTime+'\')">'+val+'</a>';}
        function vipDetail(val,row,index){return '<a href="#" onclick="showDetail(\'3\',\''+row.serviceTime+'\')">'+val+'</a>';}
        function dlkhDetail(val,row,index){return '<a href="#" onclick="showDetail(\'4\',\''+row.serviceTime+'\')">'+val+'</a>';}
        function hzhbDetail(val,row,index){return '<a href="#" onclick="showDetail(\'5\',\''+row.serviceTime+'\')">'+val+'</a>';}
        function sxkhDetail(val,row,index){return '<a href="#" onclick="showDetail(\'6\',\''+row.serviceTime+'\')">'+val+'</a>';}

        function showDetail(cusType,dateTime){
            var url = "${path}/report/khfxDetail?cusType="+cusType+"&dateTime="+dateTime;
            layIndex = layer.open({
                title:"明细",
                type: 2,
                fix: false,
                maxmin: true,
                area: ['870px', '600px'],
                content: url,
                cancel: function(index){
                }
            });
        }

        $(function () {
            var datagrid; //定义全局变量datagrid
            var editRow = undefined; //定义全局变量：当前编辑的行
            datagrid = $('#reportTable').datagrid({
                singleSelect : true,
                fit : true, // datagrid自适应宽度
                fitColumn : false, // 列自适应宽度
                striped : true, // 行背景交换
                nowap : true, // 列内容多时自动折至第二行
                border : false,
                showFooter: true,
                toolbar:'#tb',
                // idField: 'id', //主键
                columns : [ [{
                    field : 'serviceTime',
                    title : '月份',
                    width : 250
                }, {
                    field : 'ptkh',
                    title : '普通客户',
                    width : 150,
                    formatter:ptkhDetail
                }, {
                    field : 'qzkh',
                    title : '潜在客户',
                    width : 150,
                    formatter:qzkhDetail
                }, {
                    field : 'vipkh',
                    title : 'VIP客户',
                    width : 150,
                    formatter:vipDetail
                }, {
                    field : 'dlkh',
                    title : '代理商',
                    width : 150,
                    formatter:dlkhDetail
                }, {
                    field : 'hzhb',
                    title : '合作伙伴',
                    width : 150,
                    formatter:hzhbDetail
                }, {
                    field : 'sxkh',
                    title : '失效客户',
                    width : 150,
                    formatter:sxkhDetail
                } ]]
                //queryParams: {querydate: $('#querydate').val()}//查询参数
            });

            $('#querydate').bind('focus',function(){ WdatePicker({ dateFmt: 'yyyy', autoPickDate: true });});
            $('#querydate').val(new Date().format('yyyy'));

            $('#searchbth').on('click',function(e){
                if($('#querydate').val()==''){
                    return $.messager.alert('提示','请先选择年度!');
                }
                reflashGrid();
                //datagrid.datagrid("load",{dateYear: $('#querydate').val()});
                LoadColumnSerie($('#querydate').val(),$('#deptId').combobox('getValue'),$('#userId').combobox('getValue'));
            });
            $('#columnbth').on('click',function(e){
                LoadColumnSerie($('#querydate').val(),$('#deptId').combobox('getValue'),$('#userId').combobox('getValue'));
            });
            $('#linesbth').on('click',function(e){
                LoadLinesSerie($('#querydate').val(),$('#deptId').combobox('getValue'),$('#userId').combobox('getValue'));
            });
            $('#piebth').on('click',function(e){
                LoadPieSerie($('#querydate').val(),$('#deptId').combobox('getValue'),$('#userId').combobox('getValue'));
            });
            reflashGrid();
            //datagrid.datagrid("load",{dateYear: $('#querydate').val()});
            LoadColumnSerie($('#querydate').val(),$('#deptId').combobox('getValue'),$('#userId').combobox('getValue'));
        })

        function reflashGrid(){
            var options = $('#reportTable').datagrid('options');
            options.url = '${path}/report/khfxGridData';
            options.queryParams = {dateYear: $('#querydate').val(),deptId: $('#deptId').combobox('getValue'),userId: $('#userId').combobox('getValue')};
            $('#reportTable').datagrid(options);
        }
    </script>
</head>
<body style="margin: 0">
<div style="height:300px;margin-bottom:5px">
    <table id="reportTable" title="客户分析" class="easyui-datagrid" style="width:850px;height:300px"
           singleSelect="true" iconCls="icon-save">
    </table>
</div>

<div id="tb" style="padding:2px 5px;padding-left:10px">
    年度:<input type="text" class="mytextbox" id="querydate">
    部门:<input class="easyui-combotree" id="deptId" name="deptId" style="width:220px;" data-options="
            url:'${path}/commonSel/easyTreeDept?dept_id=${deptId}',
            valueField: 'id',
            textField: 'text',
            required:false,
            onChange:function(newValue, oldValue){
                $('#toUserId').combobox({
                  url:'${path}/commonSel/queryUserByDeptId?dept_id='+newValue,
                  required:true
                });
            },
            value:''
            ">
    人员:<input class="easyui-combobox" id="userId" name="userId" style="width:150px;" data-options="
            valueField: 'id',
            textField: 'text',
            value:''
            ">
    <a id="searchbth" href="#" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-search'">查询</a>
</div>

<a id="columnbth" href="#" class="easyui-linkbutton" style="margin-left: 10px" data-options="iconCls:'icon-large-chart'">柱状图</a>
<a id="linesbth" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart'">折线图</a>
<a id="piebth" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart'">饼状图</a>
<div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</body>
</html>
